<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:f="http://java.sun.com/jsf/core"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.org/ui"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="../WEB-INF/includes/templates/generalTemplate.xhtml">
    <ui:define name="content" >


        <style>

            .top-bar2{
                border: 1px solid #eeeeee;
            }
        </style>    



        <div id="main" >
            <section  id="services" class="services">
                <div class="row" data-view="services">
                    <div class="small-11 large-12 small-centered columns">
                        <div style="height:100px;width:100%">

                        </div>
                        <div class="row badges small">
                            <div class="large-6 columns flush"  >
                                <table style="border:none;width:100%;" >
                                    <tbody >
                                        <tr>
                                            <td style="width:8%;text-align:right;">
                                                <img src="../resources/css/images/about-icon.png" />
                                            </td>
                                            <td style="color:#3ba0ff;font-size:24px;text-align:left;">
                                                #{messages['page.userLogin.tittle1']}
                                            </td>
                                        </tr>
                                        <tr style="background-color:#FFFFFF;">
                                            <td>

                                            </td>
                                            <td >

                                            </td>
                                        </tr>
                                        <tr style="background-color:#FFFFFF; height:100px;">
                                            <td >
                                                <span style="font-family: 'WebSymbolsRegular';font-size:24px;color:#3ba0ff;line-height: 1.1em;">.</span>
                                            </td>
                                            <td style="text-align:left;font-size:20px;">
                                                #{messages['page.userLogin.subTittle1']}

                                                <p style="font-size:16px;">
                                                    #{messages['page.userLogin.detaSubtTittle1']}
                                                </p>
                                            </td>
                                        </tr>
                                        <tr style="background-color:#FFFFFF;">
                                            <td >
                                                <span style="font-family: 'WebSymbolsRegular';font-size:24px;color:#3ba0ff;line-height: 1.1em;">.</span>
                                            </td>
                                            <td style="text-align:left;font-size:20px;">
                                                #{messages['page.userLogin.subTittle2']}
                                                <p style="font-size:16px;">
                                                    #{messages['page.userLogin.detaSubtTittle2']}
                                                </p>
                                            </td>
                                        </tr>
                                        <tr style="background-color:#FFFFFF; height:100px;">
                                            <td >
                                                <span style="font-family: 'WebSymbolsRegular';font-size:24px;color:#3ba0ff;line-height: 1.1em;">.</span>
                                            </td>
                                            <td style="text-align:left;font-size:20px;">
                                                #{messages['page.userLogin.subTittle3']}
                                                <p style="font-size:16px;">
                                                    #{messages['page.userLogin.detaSubtTittle3']}
                                                </p>
                                            </td>
                                        </tr>
                                        <tr style="background-color:#FFFFFF; height:100px;">
                                            <td  >
                                                <span style="font-family: 'WebSymbolsRegular';font-size:24px;color:#3ba0ff;line-height: 1.1em;">.</span>
                                            </td>
                                            <td style="text-align:left;font-size:20px;">
                                                #{messages['page.userLogin.subTittle4']}
                                                <p style="font-size:16px;">
                                                    #{messages['page.userLogin.detaSubtTittle4']}
                                                </p>
                                            </td>
                                        </tr>

                                    </tbody>

                                </table>
                            </div>
                            <div class="large-6 columns flush"  >
                                <h:form id="userlogin_form" rendered="#{!userLoginBean.authenticated}">
                                    <div>

                                    </div>
                                    <table style="width:80%;margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;" >
                                        <thead>
                                            <tr>
                                                <td colspan="2" >
                                                    <span style="font-family:'WebSymbolsRegular';font-size:24px;line-height: 1.1em;">U</span> 
                                                    #{messages['page.userLogin.tittle2']}
                                                </td>
                                            </tr>

                                        </thead>
                                        <tbody>
                                            <tr>
                                                <td colspan="2" style="padding:30px;font-size:14px;">
                                                    #{messages['page.userLogin.message1']}
                                                </td>
                                            </tr>
                                            <tr style="background:#FFFFFF;">
                                                <td style="text-align:right;width:100px;">
                                                    <h:outputLabel for="username" value="#{labels['page.userLogin.userName']}" />
                                                </td>
                                                <td style="text-align:left;">
                                                    <p:inputText id="username" label="Usuario" value="#{userLoginBean.username}"
                                                                 required="true" 
                                                                 requiredMessage="#{messages['page.userLogin.errorUserNameEmpty']}" 
                                                                 title="Escribir nombre de usuario" autocomplete="off" >
                                                    </p:inputText>   
                                                </td>

                                            </tr>
                                            <tr>
                                                <td colspan="2">



                                                </td>
                                            </tr>
                                            <tr style="background:#FFFFFF;">
                                                <td style="text-align:right;width:100px;">
                                                    <h:outputLabel for="password" value="#{labels['page.userLogin.password']}" />

                                                </td>
                                                <td style="text-align:left;">
                                                    <p:password id="password" label="password" value="#{userLoginBean.password}" 
                                                                required="true" 
                                                                requiredMessage="#{messages['page.userLogin.errorPasswordEmpty']}" 
                                                                title="Escribir su contrasena" >

                                                        <p:ajax update="msgsLogin" event="keyup" />  
                                                    </p:password>

                                                </td>

                                            </tr>

                                            <tr>
                                                <td colspan="2" style="text-align:center;background-color:#FFFFFF;">
                                                    <p:commandButton value="#{labels['page.userLogin.buttonSend']}" 
                                                                     style="font-family:'Open sans',sans-serif;font-size:18px;width:90%;"
                                                                     action="#{userLoginBean.authenticate}" id="loginsend" ajax="false" />
                                                </td>
                                            </tr>
                                            <tr>
                                                <td colspan="2" style="background-color:#FFFFFF;">
                                                    <p:messages id="msgsLogin"  autoUpdate="true" closable="true"/>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </h:form>
                                <h:form>
                                    <table style="width:80%;margin-left:auto;margin-right:auto;border:none;">
                                        <tr>
                                            <td style="padding:5px;text-align:center;">
                                                <p:commandLink  id="newUserRegistry"  action="#{sessionControllerBean.navigationURL('newUserRegistry')}" ajax="false" >
                                                    <label id="labelNewUser" style="color:#3ba0ff;font-family:'Open Sans',sans-serif">#{messages['page.userLogin.labelNewUser']}</label>
                                                </p:commandLink>
                                            </td>
                                            <td style="padding:5px;text-align:center;">

                                                <p:commandLink id="forgotPassword" action="#{sessionControllerBean.navigationURL('forgotPassword')}" ajax="false" >
                                                    <label id="labelForgotPasswd"  style="color:#3ba0ff;font-family:'Open Sans',sans-serif" >#{messages['page.userLogin.labelForgotPasswd']}</label>
                                                </p:commandLink>
                                            </td>
                                        </tr>
                                    </table>
                                </h:form>


                            </div>
                        </div>
                    </div>
                </div>
            </section>      

        </div>



    </ui:define>
</ui:composition>
